<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>体育学院核酸检测信息收集</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://lib.baomitu.com/axios/0.26.1/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://lib.baomitu.com/element-ui/2.15.7/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://lib.baomitu.com/element-ui/2.15.7/index.js"></script>
    <!-- cos腾讯云对象存储 -->
    <script src="https://zgx949-1251354949.cos.ap-nanjing.myqcloud.com/cos-js-sdk-v5.min.js"></script>
    <style>
        body {
            font: 15px/1.3 'Open Sans', sans-serif;
            color: #5e5b64;
            text-align: center;
        }

        section,
        footer,
        header,
        aside,
        nav {
            display: block;
        }
        /*-------------------------
            菜鸟
        --------------------------*/

        nav {
            display: inline-block;
            margin: 0px auto 45px;
            background-color: #5597b4;
            box-shadow: 0 1px 1px #ccc;
            border-radius: 2px;
        }

        nav a {
            display: inline-block;
            padding: 18px 30px;
            color: #fff !important;
            font-weight: bold;
            font-size: 16px;
            text-decoration: none !important;
            line-height: 1;
            text-transform: uppercase;
            background-color: transparent;
            -webkit-transition: background-color 0.25s;
            -moz-transition: background-color 0.25s;
            transition: background-color 0.25s;
        }

        nav a:first-child {
            border-radius: 2px 0 0 2px;
        }

        nav a:last-child {
            border-radius: 0 2px 2px 0;
        }

        nav.home .home,
        nav.projects .projects,
        nav.services .services,
        nav.contact .contact {
            background-color: #e35885;
        }

        p {
            font-size: 22px;
            font-weight: bold;
            color: #7d9098;
        }

        p b {
            color: #ffffff;
            display: inline-block;
            padding: 5px 10px;
            background-color: #c4d7e0;
            border-radius: 2px;
            text-transform: uppercase;
            font-size: 18px;
        }

        .box-card {
            margin: 10px;
        }
    </style>

</head>

<body>

    <div id="main">

        <!-- 激活的菜单样式为  active 类 -->
        <!-- 为了阻止链接在点击时跳转，我们使用了 "prevent" 修饰符 (preventDefault 的简称)。 -->

        <nav v-bind:class="active" v-on:click.prevent>

            <!-- 当菜单上的链接被点击时，我们调用了 makeActive 方法, 该方法在 Vue 实例中创建。 -->

            <a href="#" class="home" v-on:click="makeActive('home')">核酸检测</a>

            <a href="#" class="services" v-on:click="makeActive('services');window.open('https://ty.lefthand.top/admin')">后台管理</a>
            <a href="#" class="contact" v-on:click="makeActive('contact');alert('社体202左手')">关于系统</a>
        </nav>
        <!-- 结果卡片 -->
        <div v-show="done">
            <el-result icon="success" :title="'上报成功: '+ name">
                <template slot="extra">
                    <el-button type="primary" size="medium" @click="location.reload()">返回</el-button>
                </template>
            </el-result>
        </div>

        <!-- 登记卡片 -->
        <div v-show="!done">
            <el-card class="box-card">
                <p>体育学院<br><b>核酸检测信息收集(教工)</b></p>
            </el-card>
            <el-card class="box-card">

                <el-form label-width="80px">
                    <el-form-item label="活动：">
                        <el-select v-model="actid" placeholder="请选择活动">
                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="检测地：">
                        <el-select v-model="pid" placeholder="请选择核酸检测地点">
                            <el-option v-for="item in place" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="一卡通：">
                        <el-input v-model="username" placeholder="10位数" @input="handleChange"></el-input>
                    </el-form-item>


                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">
                        全选
                    </el-checkbox>
                    <!-- <div style="margin: 15px 0;"></div> -->
                    <el-checkbox-group v-model="person_id" @change="handleCheckedCitiesChange">
                        <el-checkbox v-for="p in persons_info" :label="p.id" :key="p.id">{{ p.name }}
                        </el-checkbox>
                    </el-checkbox-group>
                    <div style="margin: 15px 0;"></div>

                    <el-form-item>
                        <el-col :span="12">
                            <el-button type="primary" icon="el-icon-check" @click="submit">打卡</el-button>
                        </el-col>
                        </el-row>
                    </el-form-item>

                </el-form>

            </el-card>
        </div>
    </div>

    <script>
        // var baseUrl = 'https://ty.lefthand.top/teacher'
        var baseUrl = 'http://127.0.0.1:8000/teacher'

        function dateFormat(fmt, date) {
            let ret;
            const opt = {
                "Y+": date.getFullYear().toString(), // 年
                "m+": (date.getMonth() + 1).toString(), // 月
                "d+": date.getDate().toString(), // 日
                "H+": date.getHours().toString(), // 时
                "M+": date.getMinutes().toString(), // 分
                "S+": date.getSeconds().toString() // 秒
                    // 有其他格式化字符需求可以继续添加，必须转化成字符串
            };
            for (let k in opt) {
                ret = new RegExp("(" + k + ")").exec(fmt);
                if (ret) {
                    fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                };
            };
            return fmt;
        }

        // 创建一个新的 Vue 实例
        var demo = new Vue({
            // DOM 元素，挂载视图模型
            el: '#main',

            // 定义属性，并设置初始值
            data: {
                actid: 0, // 当前选择的活动
                options: [], // 活动列表
                place: [{
                    id: 1,
                    name: '校内(不含公租房、青山园)'
                }, {
                    id: 2,
                    name: '校外'
                }, {
                    id: 3,
                    name: '公租房'
                }, {
                    id: 4,
                    name: '青山园'
                }], // 检测地
                username: '', // 一卡通
                pid: '', // 检测地点的id

                img: '', // 图片链接
                active: 'home',
                dialogImageUrl: '',
                dialogVisible: false,
                done: false,
                className: '',
                name: '',

                checkAll: false, // 全选人员
                person_id: [], // 检测人员的id列表
                persons_info: [],
                isIndeterminate: true

            },
            computed: {

            },
            // 点击菜单使用的函数
            methods: {
                submit() {
                    // alert(`${this.actid},${this.pid},${this.person_id}`)
                    if (this.actid === 0) {
                        this.$message({
                            type: "error",
                            message: "当前无活动！"
                        })
                        return
                    }
                    if (this.person_id.length === 0) {
                        this.$message({
                            type: "error",
                            message: "请勾选检测人员！"
                        })
                        return
                    }


                    localStorage.setItem('idcard', this.username);
                    localStorage.setItem('pid', this.pid);

                    // 提交记录
                    axios.get(`${baseUrl}/activities/checkLog?person_id=${JSON.stringify(this.person_id)}&pid=${this.pid}&aid=${this.actid}`).then(res => {
                        if (res.data.code === 1) {
                            this.done = true
                            this.className = 'res.data.data.classname';
                            this.name = `${res.data.count}人${res.data.msg}`;
                            localStorage.setItem("lastsubmit", dateFormat("YYYY-mm-dd", new Date()))

                        } else {
                            this.$message({
                                type: "error",
                                message: res.data.msg
                            })
                        }
                    })


                },
                makeActive: function(item) {
                    // 模型改变，视图会自动更新
                    this.active = item;
                },
                handleChange() {
                    console.log('change')
                        // this.delayTimer(0)
                    if (this.username.length === 10) {
                        this.getPersons()
                    }
                },

                handleCheckAllChange(val) {
                    // 是否全选
                    if (val) {
                        for (let index = 0; index < this.persons_info.length; index++) {
                            const element = this.persons_info[index];
                            this.person_id.push(element.id);
                        }
                    } else {
                        this.person_id = [];
                    }
                    // this.person_id = val ? this.persons_info : [];
                    this.isIndeterminate = false;
                },
                handleCheckedCitiesChange(value) {
                    let checkedCount = value.length;
                    this.checkAll = checkedCount === this.persons_info.length;
                    this.isIndeterminate = checkedCount > 0 && checkedCount < this.persons_info.length;
                },
                getPersons() {
                    axios.get(`${baseUrl}/person?card=${this.username}`).then(res => {
                        this.persons_info = res.data;
                    })
                }

            },
            mounted() {
                this.username = localStorage.getItem('idcard');
                this.pid = Number(localStorage.getItem('pid'));

                axios.get(`${baseUrl}/act`).then(res => {
                    this.options = res.data;
                    if (this.options.length <= 0) {
                        this.$message({
                            type: "error",
                            message: "当前无活动可选择"
                        })
                        return
                    }
                    this.actid = this.options[0].id;
                });
                if (this.username) {
                    this.getPersons()
                }

            }

        });
    </script>
</body>

</html>